<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >评价</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <p class="title">给医生进行打分</p>
      <!-- <el-rate v-model="value2" :colors="colors"> </el-rate> -->
      <van-rate
        v-model="value2"
        :size="40"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
      <p class="title">文字评价</p>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="1000"
        placeholder="请输入您对医生的评价"
        show-word-limit
      />
      <van-button
        class="b-btn"
        @click="submitClick"
        type="primary"
        color="#4779e7"
        round
        block
        >提交
      </van-button>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import navbar from "@/components/navbar";
import { setScore } from "@/api/doctor";
export default {
  name: "evaluate",
  data() {
    return {
      value2: null,
      message: "",
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      doctorId: "",
      dsId: "",
      orderId: "",
    };
  },

  components: { navbar },
  computed: {},

  created() {
    this.doctorId = this.$route.params.doctorId || null;
    this.dsId = this.$route.params.dsId || null;
    this.orderId = this.$route.params.orderId || null;
    window.scroll(0, 0);
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "consultation",
      });
    },
    // 提交
    submitClick() {
      let { value2, message, doctorId, dsId, orderId } = this;
      if (this.value2 == 0 || this.value2 == null) {
        Toast.fail("请对医生进行打分");
      } else {
        let data = {
          dsId: dsId,
          score: value2,
          doctorId: doctorId,
          scoreMark: message,
          orderId: orderId,
        };
        setScore(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("评价成功");
            setTimeout(() => {
              this.goBack();
            }, 1000);
          } else {
            Toast.fail("评价失败");
          }
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.2rem;
    position: relative;
    & /deep/ .el-rate {
      height: 100%;
    }
    & /deep/ .el-rate__icon {
      font-size: 0.35rem;
    }
    & .title {
      text-align: left;
      font-size: 0.16rem;
      margin-bottom: 0.1rem;
      margin-top: 0.2rem;
    }
    & .b-btn {
      position: fixed;
      bottom: 0.2rem;
      width: 95%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>